<template>
  <div class="artical">
    <section id="bd" style="position:relative;overflow: hidden;">
      <div class="index">
        <h2>
          <b>{{artical.title}}</b>
        </h2>
        <div class="share-title">
          <span class="src">
            <a href=""><img :src="artical.avatar" alt=""></a>
          </span>
          <span class="src">
            <a href=""></a>
          </span>
          <span class="time">{{artical.ctime}}</span>
        </div>
        <div class="h"></div>
        <div id="description" v-html="artical.content">
        </div>

        <ul class="ul-pic">
          <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.leoliu.cin" target="_blank" class="open">查看更多，下载天化云应用</a>
        </ul>
      </div>
      <div id="commentBox">
        <div class="comment" v-for="list in comment" :key="list.comments">
          <div class="avtar">
            <img :src="list.avatar" width="36" height="36" class="avtar_img">
            <img src="../assets/talk.png" class="talk">
          </div>
          <div class="comment-content">
            <p class="avtar-name">
              <span>{{list.username}}</span>
            </p>
            <p class="comments">
              <!-- <img src="../assets/shuijiao.jpg">
                <img src="../assets/shuijiao.jpg">
                <img src="../assets/shuijiao.jpg"> -->
              {{list.content}}
            </p>

            <p class="comment-time">
              <span>{{list.ctime}}</span> ·
              <span>回复&gt; </span>
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>


export default {
  data() {
    return {
      artical: [],
      comment: [],
      id:this.$route.query.id
    }
  },
  methods: {
    loadArtical: function() {
      window.scrollTo(0, 0);
      //var id = this.$refs.hide.innerHTML;
      var id = this.id;
      this.$http.get('http://thy.588net.com/index.php/article/Article/get_info?' + '&id=' + id).then(function(res) {
        this.artical = res.body.data.article;

      })
    },
    loadComment: function() {
      //var id = 3;
      this.$http.get('http://thy.588net.com/index.php/question/Question/getPostList?' + '&page=' + 1 + '&page_size=' + 8).then(function(res) {
        this.comment = res.body.data;

      })
    }
  },
  mounted() {
    this.loadArtical();
    this.loadComment();
  }
}
</script>
<style>
#description p img {
  width: 100%
}
</style>

<style scoped>
#description {
  font-size: 17px;
  line-height: 180%
}

.index {
  padding: 10px;
  overflow: hidden;
  padding-top: 60px;
}

.index h2 {
  font-size: 22px;
}

.share-title {
  font-size: 12px;
  margin-top: 10px;
}

.share-title span {
  display: block;
  height: 29px;
  line-height: 29px;
  float: left;
  margin-right: 8px;
}

.share-title img {
  display: block;
  width: 29px;
  height: 29px;
  border-radius: 25px;
}

a img {
  border: 0;
}

.h10,
.h {
  height: 10px;
  clear: both;
}

.comments img:nth-of-type(3n) {
  margin-right: 0;
}

.avtar {
  margin-right: 10px;
  width: 36px
}

.comment {
  border-top: 1px solid #d8d8d8;
  color: #5a5a5a;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  overflow: hidden;
  padding: 10px;
}

.avtar_img {
  width: 36px;
  height: 36px;
  border-radius: 18px;
}

.talk {
  width: 20px;
  height: 20px;
  float: right;
}

.comment-content {
  width: 100%;
}

.avtar-name {
  height: 36px;
  line-height: 36px;
  font-size: 12px;

  overflow: hidden;
  color: #5a5a5a;
}

.avtar-name span:nth-of-type(1) {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
}

.comments {
  text-align: justify;
  font-size: 14px;
  line-height: 24px;
  color: #5A5A5A;
  overflow: hidden;
}

.comments img {
  width: 31.6%;
  margin-right: 2.6%;
  float: left;
  height: 60px;
}

.comment-time {
  font-size: 12px;
  color: gray;
  margin-top: 6px;
  height: 1rem;
  line-height: 20px;
}
</style>
